<template>
  <div class="generate_preview">
    <div class="preview_top">
      <div class="preview_title">合成预览</div>
      <div class="preview_desc">
        * 预览效果仅供参考，请以实际合成成片效果为准哦~
      </div>
    </div>
    <div class="estimate_num">
      <div class="num_label">预计可合成成片</div>
      <div class="num_value">{{ videoNumber }}</div>
    </div>

    <div class="operate_con">
      <div class="operate_item">
        <div class="left_con">
          <div class="title">推荐成片：</div>
          <div class="value">{{ videoNumber }}</div>
        </div>
        <div class="right_btn">
          <a-button type="default" size="small">全部应用</a-button>
        </div>
      </div>
      <div class="operate_item">
        <div class="left_con">
          <div class="title">差异度大成片：</div>
          <div class="value">{{ videoNumber }}</div>
        </div>
        <div class="right_btn">
          <a-button type="default" size="small">全部应用</a-button>
        </div>
      </div>
      <div class="operate_item">
        <div class="left_con">
          <div class="title">完全不重复：</div>
          <div class="value">{{ videoNumber }}</div>
        </div>
        <div class="right_btn">
          <a-button type="default" size="small">全部应用</a-button>
        </div>
      </div>
      <div class="operate_item">
        <div class="left_con">
          <div class="title">选用数量：</div>
        </div>
        <div class="right_btn">
          <a-input
            style="width: 200px"
            placeholder="请输入"
            v-model:value="num"
          />
        </div>
      </div>
    </div>

    <div class="bottom_btn">
      <a-button type="primary" block>确定合成</a-button>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  setup(props, context) {
    const state = reactive({
      videoNumber: 1,
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.generate_preview {
  .preview_top {
    padding: 20px;
    .preview_title {
      color: #1f2225;
      font-weight: 700;
      font-size: 16px;
    }
    .preview_desc {
      color: #9ea4aa;
      font-size: 11px;
      margin-top: 5px;
    }
  }
  .estimate_num {
    padding: 20px;
    background-color: #fafafa;
    .num_label {
      color: #9ea4aa;
      font-size: 12px;
    }
    .num_value {
      color: #1f2225;
      font-weight: 700;
      font-size: 19px;
      margin-top: 10px;
    }
  }
  .operate_con {
    padding: 0 20px;
    .operate_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      .left_con {
        display: flex;
        align-items: center;
        .title {
        }
        .value {
          font-weight: 700;
        }
      }

      .right_btn {
      }
    }
  }
  .bottom_btn {
    padding: 20px;
  }
}
</style>
